<template>
  <panel type="success" icon="ios-desktop" :title="fullTitle" :enableToggle="false">
    <p>
      <b>服务器所在区域：{{ detail.regionName }}</b>
    </p>
    <p>内网IP地址：{{ detail.innerIP }}</p>
    <p>外网IP地址：{{ detail.outerIP }}</p>
    <p>
      服务器状态：<b :class="status == '正常' ? 'text-success' : 'text-danger'">{{ status }}</b>
    </p>
    <div v-if="searched">
      <p>
        逻辑处理器：<b>{{ flavor.vcpus }} 核</b>
      </p>
      <p>
        内存容量：<b>{{ (flavor.ram || 0) / 1024 }} GB</b>
      </p>
      <p>
        硬盘容量：<b>{{ flavor.disk || '不限制' }}</b>
      </p>
    </div>
    <p v-else>服务器信息查询中...</p>
  </panel>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      status: '--',
      flavor: null,
      searched: false,
      flavor: {}
    };
  },
  computed: {
    fullTitle() {
      return `【${this.detail.describle}】${this.detail.name}`;
    }
  },
  mounted() {
    this.$http.get(`/api/hwcloud/ecs/status/${this.detail.id}`).then(res => {
      this.searched = true;
      this.status = res.server.status == 'ACTIVE' ? '正常' : '异常';

      this.$http.get(`/api/hwcloud/ecs/${this.detail.id}/detail/${res.server.flavor.id}`).then(res2 => {
        this.flavor = res2.flavor;
      });
    });
  }
};
</script>

<style lang="less" scoped>
.ivu-card-body {
  p {
    line-height: 26px;
  }
}
</style>
